<template>
    <main-wrap ref="mianEle" :loading="true" :load="onLoad" :end="page.finished" :showOverTxt="page.lists.length>0">
        <template v-slot:header>
                <Header title="消息中心"/>
                <div class="ctopBox">
                    <my-tab v-model="active" :lists='[
                        {title:"通知公告",name:1},
                        {title:"系统消息",name:2}
                        ]' 
                        :space="true" 
                        @change="getData"/>
                </div>
        </template>
        <div class="messageBox">
            <notice-list v-if="active==1" :lists="page.lists"/>
            <sys-messages v-else-if="2" :lists="page.lists"/>
            <empty v-if="page.finished && page.lists.length<1"/>
        </div>
        
        
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed,getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import myTab from '@/components/myTab.vue'
import noticeList from './components/noticeList.vue'
import sysMessages from './components/sysMessages.vue'
import empty from '@/components/empty.vue'
export default {
    components:{
        mainWrap,
        Header,
        myTab,
        noticeList,
        sysMessages,
        empty
    },
    setup(props,context){
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            active:1,
            page:{
                lists:[],
                pageIndex:1,
                pageSize:20,
                finished: false
            },
            st:''
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = ()=> {
            state.st && clearTimeout(state.st)
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                state.st = setTimeout(async () => {
                    let mtStr = 'arApi/get_notice_list'
                    if(state.active==2){
                        mtStr = 'arApi/get_sys_msg_list'
                    }
                    const res = await store.dispatch(mtStr, {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.count) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const getData = async ()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }

        return {
            ...toRefs(state),
            onLoad,
            getData
        }
    }
}
</script>

<style lang="scss" scoped>
    .ctopBox{
        padding: 15px 38px 0 38px;
    }
    .messageBox{
        padding: 30px 40px 0 40px;
    }
</style>